import { ref, reactive, type FunctionalComponent as FC } from 'vue';
import type {
  ProjectDetailStateForm,
  ViewBasicSetting,
  ViewAnnoSetting,
  ViewDataSetting,
  ViewAnnoUserSetting,
  SeriesDataItem,
} from '@/store/modules/projectDetail/type';
import * as ApiTypes from '@/api/project/project.d';
import '../styles/stepForm.less';
interface Prop {
  id: string;
  layout: string;
  status: string;
  type: 'create' | 'update';
  disabled: boolean;
  form: { basicSetting: ViewBasicSetting; annoSetting: ViewAnnoSetting };
  commonList: ApiTypes.CommonConfigResponse;
  compList: ApiTypes.CompConfigItem[];
  compTotal: number;
  toolList: ApiTypes.ToolConfigItem[];
  lesionList: ApiTypes.LesionConfigItem[];
  watchFormData: Function;
  getFormLeisonDataList: Function;
  clearLesionList: Function;
  getCompData: Function;
  getCompDialog: Function;
  sortAlertTableData: Function;
  clearAlertTableData: Function;
  setSelectCheckAll: Function;
  clearSelectCheckAll: Function;
  delCompAlertData: Function;
  delLesionData: Function;
  changeBizType: Function;
}
const BasicItem: FC<Prop, any> = (props, ctx) => {
  return (
    <div class="basic-container">
      <div class="basic-title">基础设置</div>
      <div class="basic-content">
        <a-form-item
          field="basicSetting.department"
          label="科室"
          class="basic-item"
          required
          auto-label-width
          wrapper-col-props={{ span: 16 }}
          disabled={props.disabled}
        >
          <a-select
            class="w272"
            placeholder="请选择"
            v-model={props.form.basicSetting.department}
            onChange={() => props.watchFormData('basicSetting.department')}
          >
            {getOptions(props.commonList.departments)}
          </a-select>
        </a-form-item>
        <a-form-item
          field="basicSetting.label"
          label="任务标签"
          class="basic-item"
          required
          auto-label-width
          wrapper-col-props={{ span: 16 }}
          disabled={props.disabled}
        >
          <a-select
            class="w272"
            placeholder="请选择"
            v-model={props.form.basicSetting.label}
            onChange={() => props.watchFormData('basicSetting.label')}
          >
            {getOptions(props.commonList.taskLabels)}
          </a-select>
        </a-form-item>
        <a-form-item
          field="basicSetting.target"
          label="任务目标"
          class="basic-item"
          required
          auto-label-width
          wrapper-col-props={{ span: 16 }}
          disabled={props.disabled}
        >
          <a-select
            class="w272"
            placeholder="请选择"
            v-model={props.form.basicSetting.target}
            onChange={() => props.watchFormData('basicSetting.target')}
          >
            {getOptions(props.commonList.taskTargets)}
          </a-select>
        </a-form-item>
        <a-form-item
          field="basicSetting.uses"
          label="任务用途"
          class="basic-item"
          required
          auto-label-width
          wrapper-col-props={{ span: 16 }}
          disabled={props.disabled}
        >
          <a-select
            class="w272"
            placeholder="请选择"
            v-model={props.form.basicSetting.uses}
            onChange={() => props.watchFormData('basicSetting.uses')}
          >
            {getOptions(props.commonList.taskUses)}
          </a-select>
        </a-form-item>
      </div>
      <div class="discard-content">
        <a-form-item
          field="basicSetting.discardCode"
          label="废片原因"
          required
          auto-label-width
          label-col-props={{ span: 1.5 }}
          wrapper-col-props={{ span: 13 }}
          disabled={props.disabled}
        >
          <a-select
            placeholder="请选择，可多选"
            multiple
            max-tag-count={6}
            v-model={props.form.basicSetting.discardCode}
            onChange={() => props.watchFormData('basicSetting.discardCode')}
          >
            {getOptions(props.commonList.discardReasons)}
          </a-select>
        </a-form-item>
      </div>
    </div>
  );
};

const getOptions = (data) => {
  return data.map((item) => (
    <a-option value={item.value}>{item.name}</a-option>
  ));
};

export default BasicItem;
